<template>
	<contentBox
		id="go-chart-edit-layout"
		class="editLayout"
		:flex="true"
		:showTop="false"
		:showBottom="true"
		:depth="1"
		:xScroll="true"
		:disabledScroll="true"
		@mousedown="mousedownHandleUnStop"
		@drop="dragHandle"
		@dragover="dragoverHandle"
		@dragenter="dragoverHandle">
		<editRule>
			<div class="dragList">
				<div class="dragList" style="height: 200px">
					ddd
					<draggable v-model="chartList" animation="200" item-key="itemId" group="people">
						<template #item="{ element }">
							<div class="item">
								<h3>{{ element.title }}</h3>
								<el-image :src="require('../../../../../assets/images/charts/'+element.image)"
										  style="height: 100%;width: 100%;"></el-image>
							</div>
						</template>
					</draggable>
				</div>
			</div>
		</editRule>
	</contentBox>
</template>
<script>
import contentBox from './contentbox'
import editRule from "@/components/charts/designer/widget/editrule/index.vue";
export default {
	name: 'Edit Rule Designer',
	components: {
		editRule,
		contentBox
	},
	data(){
		return{
			chartList:[],
		}
	},
	mounted() {
	},
	methods:{
		mousedownHandleUnStop(){

		},
		dragHandle:{

		},
		dragoverHandle:{

		},
	}
}
</script>
<style scoped>
.editLayout{
	width: 100%;
	height: 100%;
}
.dragList {overflow: auto;}
.item {cursor: move;float: left;background: #fff;text-align: center;border: 1px solid #e6e6e6;}
.dragList .sortable-ghost {
	opacity: 0.5;
}
</style>
